<!--
 * @Date: 2023-02-27 19:06:54
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-01 17:22:37
 * @FilePath: \sososn-web-new\src\views\customerCase\index.vue
-->
<template>
  <div class="customerCase">
    <div
      class="customerCase-header flex-col"
      :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
    >
      <div class="header-content">
        <p class="text-title">客户案例</p>
        <p class="text-sub">
          我们致力于通过专业的沟通、创新的理念、优质的服务专注赢得每一位客户的信任和口碑
        </p>
      </div>
    </div>
    <div class="customerCase-wapper">
      <div class="group1" data-aos="fade-up">
        <ul class="group1-list flex-row">
          <li
            v-for="(item, index) in schemeList"
            :key="index"
            class="flex-col"
            :style="{ background: `url(${item.url}) no-repeat`, 'background-size': '100% 100%' }"
          >
            <p class="text-title">{{ item.title }}</p>
            <p class="text-content">{{ item.content }}</p>
            <div class="box-btn">
              <router-link :to="item.to"><span>查看案例</span></router-link>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
const $getAssetsImages = inject('$getAssetsImages')
const imgUrl = $getAssetsImages('customerCase.png')

const schemeList = ref([
  {
    title: '新峰项目案例',
    content: '系统建设主要围绕大数据中心搭建、数据标准化治理和数据可视化分析、展现3部分内容',
    url: $getAssetsImages('scheme-bg1.png'),
    to: '/customerCaseDetails/xinfeng'
  },
  {
    title: '国能项目案例',
    content: '系统建设主要围绕大数据中心搭建、数据标准化治理和数据可视化分析、展现3部分内容',
    url: $getAssetsImages('scheme-bg2.png'),
    to: '/customerCaseDetails/guoneng'
  },
  {
    title: '华如项目案例',
    content: '系统建设主要围绕大数据中心搭建、数据标准化治理和数据可视化分析、展现3部分内容',
    url: $getAssetsImages('scheme-bg3.png'),
    to: '/customerCaseDetails/huaru'
  }
])
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
@use './scss/index.scss';
</style>
